<template>
  <div class="bg-box relative">
    <div
      class=" w-[480px] h-[330px] bg-[#fefefe] flex flex-col items-center p-[10px] rounded-[5px] shadow animate__animated animate__slideInLeft relative overflow-hidden">
      <p class=" text-[30px] mb-[30px]">欢迎登录</p>
      <div class=" w-[450px]">
        <el-form label-width="50px" :model="userInfo" :rules="userInfoRules" ref="loginFormEl">
          <!-- 用户名登录 -->
          <el-form-item prop="userName" v-if="switch_mode">
            <template #label>
              <span class="iconfont icon-username text-[17px]"></span>
            </template>
            <el-input placeholder="请输入用户名" v-model="userInfo.userName" />
          </el-form-item>
          <!-- 邮箱登录 -->
          <el-form-item prop="email" v-else-if="!switch_mode">
            <template #label>
              <span class="iconfont icon-youxiang text-[17px]"></span>
            </template>
            <el-input placeholder="请输入邮箱" v-model="userInfo.email" />
          </el-form-item>
          <el-form-item prop="password">
            <template #label>
              <span class="iconfont icon-pwd text-[17px]"></span>
            </template>
            <el-input placeholder="请输入密码" type="password" v-model="userInfo.password" />
          </el-form-item>
          <el-form-item prop="choose">
            <el-checkbox class="transform  origin-left" v-model="userInfo.choose">
              <div class="text-[12px] choose_box" @click="$router.push({ name: 'Attention' })">已阅读并同意宠物之家帐号 用户协议 和 隐私政策
              </div>
            </el-checkbox>
          </el-form-item>
          <div class=" flex justify-center mt-[5px]">
            <el-button type="primary" class=" w-[410px] font-serif text-[17px]" :loading-icon="Loading"
              :loading="isLoading" @click="submitLoginForm">登录</el-button>
          </div>
        </el-form>
      </div>
      <div class=" self-end  mt-[30px] text-[12px] text-[#ffff]  flex justify-between w-full">
        <p class=" hover:cursor-pointer hover:text-[#ffaf40] flex items-center" @click="switch_way">
          切换登录方式<el-icon>
            <Switch />
          </el-icon></p>
        <p class="hover:cursor-pointer hover:text-[#ffaf40] flex items-center"
          @click="$router.push({ name: 'Register' })">去注册<el-icon>
            <ArrowRight />
          </el-icon></p>
      </div>
      <img src="../assets/svg/wave.svg" class=" absolute -z-10 bottom-0">
      <span class="iconfont icon-chongwutubiao21 absolute left-4 text-[32px] hover:cursor-pointer"
        @click="$router.replace({ name: 'Index' })"></span>
    </div>
    <!-- <div class=" absolute left-[100px] text-[90px] text-[#faaf00]" style="font-family:'方正舒体'">宠物之家</div> -->
    <img src="../assets/img/petHome.png" class=" absolute left-[80px] top-[60px] h-[150px] hover:cursor-pointer"
      @click="$router.replace({ name: 'Index' })">
  </div>
</template>
<script setup>
import { ArrowRight, Loading, Switch } from "@element-plus/icons-vue";
import { ElNotification, ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { mainStore } from "../store";
import API from "../utils/API";
const isLoading = ref(false);
const switch_mode = ref(true);
const router = useRouter();
const store = mainStore();
const userInfo = reactive({
  userName: "",
  password: "",
  email: "",
  choose: "",
})
// 表单校验
const userInfoRules = {
  userName: [
    { required: true, message: "请输入账号", trigger: "blur" }
  ],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" },
  {
    validator: async (rule, value, callback) => {
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error("邮箱格式不正确"));
      }
    }, trigger: "blur"
  }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" }
  ],
  choose: [
    { required: true, message: "请仔细阅读协议", trigger: "blur" }
  ],
}

const loginFormEl = ref(null);
const submitLoginForm = () => {
  loginFormEl.value.validate(valid => {
    if (valid) {
      // console.log("验证成功");
      checkLogin();
    }
    else {
      // console.log("验证失败");
      ElMessage({
        message: "请填写内容",
        grouping: true,
        type: "error"
      });
    }
  });
}
const switch_way = () => {
  switch_mode.value = !switch_mode.value;
  if (switch_mode.value) {
    ElNotification({
      title: '系统提示',
      message: '已切换为用户名登录',
      type: 'success',
      position: 'top-left',
      duration: 1500,
    })
  } else {
    ElNotification({
      title: '系统提示',
      message: '切换为邮箱登录',
      type: 'success',
      position: 'top-left',
      duration: 1500,

    })
  }
}
const checkLogin = () => {
  isLoading.value = true;
  API.LoginInfo.checkLogin(userInfo).then(result => {
    console.log(result);
    store.setToken(result.token);
    store.setLoginUserInfo(result.user);
    //登录成功提示
    ElNotification({
      title: "提示",
      message: "登录成功",
      type: "success"
    });

    //登录成功进行跳转
    router.replace({
      name: "Index"
    })
  }).catch(error => {
    // console.log(error);
  }).finally(() => {
    isLoading.value = false;
  })
}


</script>
<style scoped lang="scss">
.bg-box {
  background-image: url(../assets/img/bg.png);
  width: 100vw;
  height: 100vh;
  background-size: cover;
  @apply flex justify-center items-center;

  .choose_box {
    &:hover {
      text-decoration: solid #409eff underline;
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>